import React, { Component } from 'react';
import { Switch,Route } from 'react-router-dom'

import { Layout, Menu, Breadcrumb, Table } from 'antd'

import './manager.css'
import linkList from './menu'
import ProductForm from '../product/productForm';
const { Header, Content, Footer, Sider } = Layout
const { SubMenu, Item:MenuItem} = Menu

class Manager extends Component {

    state={
        openKeys:[]
    }

    componentDidMount() {
        const basepath = this.props.match.path
        const defaultOpenKeys = Object.keys(linkList).filter(v=>linkList[v].filter(menu=>this.props.location.pathname.includes(`${basepath}${menu.path}`)))
        this.setState({openKeys:defaultOpenKeys})
    }

    menuClickHandle=(item, key, keypath)=>{
        this.props.history.push(item.key)
    }

    menuSelectHandle = (item)=>{
        if (item.length > 1) {
            this.setState({openKeys:[item[item.length-1]]})
        } else {
            this.setState({openKeys: item})
        }
    }

    render() {
        const basepath = this.props.match.path
        return (
            <div>
                    <Layout>
                        <Sider style={{overflow:'auto', height:'100%', position:'fixed', left:0}}>
                            <div className="logo" />
                            <Menu mode="inline" theme="dark" 
                                onClick={this.menuClickHandle}
                                onOpenChange={this.menuSelectHandle}
                                selectedKeys={[this.props.location.pathname.split('/').slice(0,3).join('/')]}
                                openKeys={this.state.openKeys}
                                >
                                {
                                    Object.entries(linkList).map(v=>(
                                        <SubMenu key={v[0]} title={v[0]}>
                                            {v[1].map(menu=>(
                                                <MenuItem key={`${basepath}${menu.path}`}>{menu.title}</MenuItem>
                                            ))}
                                        </SubMenu>
                                    ))
                                }
                            </Menu>
                        </Sider>
                        <Layout style={{marginLeft:200}}>
                            <Header  style={{ background: '#fff', padding: 0 }}>
                                <Menu mode="horizontal" style={{lineHeight:'64px'}}>
                                    <Menu.Item>nav1</Menu.Item>
                                    <Menu.Item>nav1</Menu.Item>
                                    <Menu.Item>nav1</Menu.Item>
                                </Menu>
                            </Header>
                            <Breadcrumb style={{ margin: '5px 0 0 0', padding: 24, background: '#fff' }}>
                                {this.props.history.location.pathname.split('/').map(v=>(
                                    <Breadcrumb.Item key={v}>{v}</Breadcrumb.Item>
                                ))}
                            </Breadcrumb>
                            <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: '80vh' }}>
                                <Switch>
                                <Route path="/manage/product/product-form/:id" component={ProductForm} />
                                {
                                    Object.entries(linkList).map(v=>(
                                        v[1].map(menu=>(
                                            <Route key={menu.path} path={`${basepath}${menu.path}`} component={menu.component} />
                                        ))
                                    ))
                                }
                                </Switch>
                            </Content>
                        </Layout>
                    </Layout>
            </div>
        )
    }
}

export default Manager